<template>
  <div v-loading="!loaded" class="chart-editor">
    <iframe ref="chart" frameborder="0" :src="url" class="h-max w-max" />
    <!-- <button @click="sendMessage" class="data-button" :disabled="!loaded">加载数据</button> -->
  </div>
</template>

<script>
export default {
  props: {
    json: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      url: 'http://120.77.147.7/plotEditor/',
      iframeWindow: {},
      loaded: false
    };
  },
  mounted() {
    this.iframeWindow = this.$refs.chart.contentWindow;
    // 判断iframe是否加载完毕
    const iframe = this.$refs.chart;
    const onload = () => {
      this.sendMessage();
      this.loaded = true;
    };
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', onload);
    } else {
      iframe.onload = onload;
    }
  },
  methods: {
    sendMessage() {
      this.iframeWindow.postMessage(this.json, this.url);
    }
  }
};
</script>

<style lang="scss">
.chart-editor {
  border: 0px;
  width: 100%;
  height: 600px;

  // .data-button {
  //   background: #0064c8;
  //   border: none;
  //   color: #fff;
  //   font-weight: 400;
  //   padding: 0 16px;
  //   border-radius: 2px;
  //   height: 32px;
  //   font-size: 12px;
  //   min-width: 62px;
  //   cursor: pointer;
  //   position: absolute;
  //   right: 10px;
  //   bottom: 10px;
  // }

  // .data-button:hover {
  //   text-decoration: none;
  //   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08),0 2px 4px 0 rgba(0,0,0,0.16);
  //   color: #fff;
  //   background: #0064c8;
  //   border-color: transparent;
  //   text-decoration: none;
  // }
  // button:disabled {
  //   cursor: not-allowed;
  // }
}
</style>
